<script>
import axios from "axios";

export default {
  name: "SFooter",
  data() {
    return {
      showZz: false,
      count:0,
      timer:null,
    }
  },
  methods: {
    btnClick() {
      const lis = document.querySelectorAll('.nav li')
      lis.forEach(li => li.addEventListener('click', function () {
        lis.forEach(item => {
          if (!this.classList.contains('musician')) {
            item.classList.remove('active');
            this.classList.add('active');
          }
        })
      }))
    },

    playPause() {
      let music = document.getElementById('music2');
      let img = document.getElementById('music_img');
      let bo_ing = document.getElementById("bo_ing")
      let title = document.getElementsByClassName("scrollText")[0]
      if (music.paused) {
        music.play();
        bo_ing.innerText = "正在播放:"
        img.src = require('@/assets/img/24gf-pause2 (1).png')
        title.style.animationPlayState = 'running'

      } else {
        music.pause();
        bo_ing.innerText = "暂停播放:"
        img.src = require('@/assets/img/24gf-play (1).png')
        title.style.animationPlayState = 'paused'
      }

    },
    switchingInterface(path) {
      if(this.$route.name !== path) {
        if(path === 'letter') {
          this.count = 0
          this.clearTimer()
        } else {
          this.setTimer()
        }
        this.$emit('switchingInterface',path)
      }
    },
    getCount() {
      axios.get("/api/notification/count")
          .then(res => this.count = res.data)
          .catch(err => this.$message.error(err))
    },
    setTimer() {
      this.clearTimer()
      this.timer = setInterval(() => {
        this.getCount()
      }, 10000)
    },
    clearTimer() {
      this.timer && clearInterval(this.timer)
    },
    firstScroll(){
      let div1 = document.getElementsByClassName("f_scrollText")[0]
      let div2 = document.getElementsByClassName("scrollText")[0]
      div1.style.display = "none"
      div2.style.display = ""
    }
  },
  mounted() {
    this.getCount()
    this.btnClick()
    this.setTimer()

  },
  beforeDestroy() {
    this.clearTimer()
  },

}
</script>

<template>
  <div>
    <div class="nav">
      <ul>
        <!-- 设置active效果，用于获取选中效果 用于获取选中效果 行内样式是一种直接在HTML元素上指定样式的方法，在这种情况下，你使用 style 属性将 --clr 变量设为不同色 -->
        <li class="active" style="--clr:#f44336"
            @click="switchingInterface('home')"><span><i
            class="iconfont icon-shouye"></i></span></li>
        <li style="--clr:#0fc70f"
            @click="switchingInterface('photo')"><span><i
            class="iconfont icon-xiangce"></i></span></li>
        <li class="musician">
          <div class="mus_box" @mouseenter="showZz=true" @mouseleave="showZz=false">
            <img :src="require('@/assets/img/icon_听音乐.png')" alt=""/>
            <div class="mask" v-show="showZz">
              <img id="music_img" :src="require('@/assets/img/24gf-play (1).png')" alt="" @click="playPause" @click.once="firstScroll"/>
            </div>
          </div>
        </li>
        <li style="--clr:#b145e9"
            @click="switchingInterface('dynamic')"><span><i
            class="iconfont icon-fenxiang"></i></span></li>
        <li style="--clr:#ffa111"
            @click="switchingInterface('letter')">
            <span >
              <el-badge :value="count" :hidden="count===0">
                <i class="iconfont icon-youjian"></i>
              </el-badge>
            </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style>
.nav {
  height: 60px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav ul {
  display: flex;
  width: 50%;
}

.nav ul li {
  height: 60px;
  /* flex:1是让所有的li平均分nav这个容器 */
  flex: 1;
  position: relative;
  display: flex;
  z-index: 2;
  justify-content: center;
}

.nav ul li span {
  /* 进行定位，使之通过span元素带动矢量图标进行水平垂直到中心位置 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* 设置鼠标移入的样式 */
  cursor: pointer;
  /* 设置动画过度事件以及延迟 */
  transition: 0.2s;
  transition-delay: 0s;

  .el-badge__content {
    border: none;
  }
}

.nav ul li span i {
  color: #222327;
  font-size: 1.5em;
}

.nav ul li.active span {
  /* 设置了一开始的背景颜色，后面会被取代，设置了点击的时候会向上移动 */
  transform: translateY(-25px);
  transition-delay: 0.25s;
}

.mus_box {
  position: relative;
  height: 90px;
  width: 90px;
  background-color: #409EFF;
  border-radius: 50%;
  bottom: 55px;
  text-align: center;
}

.mus_box .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  text-align: center;
}

.mus_box .mask img {
  margin-top: 30px;
  width: 30px;
  height: 30px;
}


.mus_box:hover {
  cursor: pointer;
}

.mus_box img {
  margin-top: 5px;
  height: 70px;
  width: 70px;
}


.nav ul li.active span i {
  /* 设置了点击时候矢量图标的文字颜色 */
  color: #fff;
}

.nav ul li span:hover {
  background-color: rgba(0, 0, 0, 0.1);

}

.nav ul li span::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: orange;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0;
  transition: 0.5s;
  transition-delay: 0s;
}

.nav ul li span::before {
  opacity: 0.5;
  transition-delay: 0.25s;
}

/* 这里将i元素设置的颜色显示出来 这两个样式块中都使用了 background: var(--clr); 属性，可以将背景颜色设置为clr 变量所表示的值。这种使用自定义变量的方式，可以在代码中统一定义颜色值，以便在需要时进行统一更改。*/
.nav ul li.active span {
  background: var(--clr);
}

.nav ul li span::before {
  background: var(--clr);
}
</style>